<template>
	<baseDialog ref="dialogRef" :title="dialogTitle" width="600px" @confirm="handleSubmit" @close="handleClose">
		<el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
			<el-form-item label="应用名称：" prop="name">
				<div class="w-80">
					<el-input v-model="formData.name" placeholder="请输入应用名称" clearable />
				</div>
			</el-form-item>
			<el-form-item label="应用标识：" prop="identify">
				<div class="w-80">
					<el-input v-model="formData.identify" placeholder="请输入应用标识" clearable :disabled="dialogType == 'update'" />
				</div>
			</el-form-item>
            <el-form-item label="版本号：" prop="version">
				<div class="w-80">
					<el-input v-model="formData.version" placeholder="请输入版本号" clearable />
				</div>
			</el-form-item>
			<el-form-item label="缩略图：" prop="thumb">
				<div>
					<imageUpload v-model="formData.thumb" promptText="建议尺寸：400*400" :limit="1" />
				</div>
			</el-form-item>
			<el-form-item label="版本包：" prop="file_url">
				<div>
					<fileUpload ref="fileUploadRef" v-model="formData.file_url" :download="false" :isDialog="false" promptText="上传限制：zip" accept=".zip" :limit="1" />
				</div>
			</el-form-item>
		</el-form>
	</baseDialog>
</template>

<script setup lang="ts" name="appStoreImport">
import { ref, shallowRef, reactive, computed } from 'vue';
import type { FormInstance } from 'element-plus';
import { messageSuccess } from '/@/utils/message';
import { manageimport, manageLocalDetail } from '/@/api/addons/manage';

const dialogRef = ref(null);

const dialogType = ref('add');

const dialogTitle = computed(() => {
	return dialogType.value == 'add' ? '导入应用' : '更新应用';
});

const emit = defineEmits(['submit', 'close']);

const formRef = shallowRef<FormInstance>();

const formData = reactive({
    operate_type: 'install',
	name: '',
    identify: '',
    version: '',
    thumb: '',
    file_url: '',
});

const rules = reactive({
	name: [{ required: true, message: '请输入应用名称', trigger: ['blur'] }],
    identify: [{ required: true, message: '请输入应用标识', trigger: ['blur'] }],
    version: [{ required: true, message: '请输入版本号', trigger: ['blur'] }],
    thumb: [{ required: true, message: '请上传缩略图', trigger: ['blur'] }],
    file_url: [{ required: true, message: '请上传版本包', trigger: ['blur'] }],
});

const fileUploadRef = ref();

const handleSubmit = async () => {
	await formRef.value?.validate(async (valid: boolean) => {
		if (!valid) return;
		await manageimport(formData).then((res: any) => {
			dialogRef.value?.close();
			messageSuccess(dialogTitle.value + '成功');
			emit('submit');
			location.reload();
		}).catch((res: any) => {
			formData.file_url = '';
			fileUploadRef.value?.deleteFile(0);
		});
	});
};

const setFormData = async (row: any, callback: any) => {
	const data = await manageLocalDetail({
		id: row.id,
	});

	for (const key in formData) {
		if (data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
	formData.file_url = '';
	formData.version = '';
	callback();
};

const handleClose = () => {
	emit('close');
};

const open = (type = 'add') => {
	dialogType.value = type;
	formData.operate_type = (type == 'add'?'install':'update');
	dialogRef.value?.open();
};

defineExpose({
	open,
	setFormData
});
</script>
